<template>
  <div>
    <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-image width="10rem" height="10rem" fit="contain" class="img"
      src="https://img.cwiyc.top/logo.png" />
    <van-form @failed="onFailed" @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="value1" name="account" label="账号" placeholder="请输入账号"
          :rules="[{ pattern: patternAcc, message: '请使用邮箱注册' }]" />
        <van-field v-model="value2" name="password" label="密码" placeholder="请输入密码"
          :rules="[{ pattern: patternPas, message: '4到16位(字母,数字,下划线,减号)' }]" />
        <van-field v-model="value3" name="phone" label="手机号码" placeholder="请输入手机号码"
          :rules="[{ pattern: patternPho, message: '请输入正确的手机号码' }]" />
        <van-field name="radio" label="单选框">
          <template #input>
            <van-radio-group v-model="checked" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="0">女</van-radio>
              <van-radio name="2">保密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
    <div id="toast"></div>
  </div>
</template>

<script>
import { NavBar, Form, Field, CellGroup, Toast, Image as VanImage } from 'vant';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const request = require('@/network/request').default;
export default {
  name: 'Register',
  props: [],
  setup(props, context) {
    const onClickLeft = () => history.back();
    const value1 = ref('');
    const value2 = ref('');
    const value3 = ref('');
    const patternAcc = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; //注册的表单验证
    const patternPas = /^[a-zA-Z0-9_-]{4,16}$/;
    const patternPho = /^1\d{10}$/;


    const onFailed = (errorInfo) => {
      // console.log('failed', errorInfo);
    };
    const onSubmit = (values) => {
      // console.log('submit', values);
      register(values)
    };
    function register(values) {
      let user = {
        type: 1,
        nickname: values.account,
        password: values.password,
        phone: values.phone,
        sex: values.radio,
        avatar: ''
      }
      request.post('/register', user).then(res => {
        console.log(res)
        if (res.code == 0) {
          let user1 = {
            nickname: values.account
          }
          request.post('/getuser', user1).then(res => {
            console.log(res)
            res.data.password = ''
            if (res.code == -1) {
            } else if (res.code == 0) {
              localStorage.setItem('userInfo', JSON.stringify(res.data))
              setTimeout(() => {
                goto()
              }, 1000);
            }
          })
        } else if (res.code == -1) {
          Toast.fail({
            message: "用户名重复",
            teleport: "#toast"
          });
        }
      })
    }
    const router = useRouter();
    function goto() {
      router.push('/')
    }

    const checked = ref(false);
    return {
      value1,
      value2,
      value3,
      onFailed,
      patternAcc,
      patternPas,
      patternPho,
      onClickLeft,
      checked,
      onSubmit
    };
  }
}
</script>

<style scoped>
#toast {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
}
.img {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
</style>
